<template>
    <br>
    <div class="card_head">产品</div>
    <div class="category">
        <a-card class="categoryDetail">    <!--三级材料分类-->
            <a-tabs v-model:activeKey="catagories.activeKey">
                <a-tab-pane v-for="level_1 in catagories.data" :key="level_1.id" :tab="level_1.id">
                    <a-tabs v-model:activeKey="level_1.activeKey">
                        <a-tab-pane v-for="level_2 in level_1.data" :key="level_2.id" :tab="level_2.id">
                            <a-tabs v-model:activeKey="level_2.activeKey">
                                <a-tab-pane v-for="level_3 in level_2.data" :key="level_3.id" :tab="level_3.id">{{ level_3.data }}</a-tab-pane>
                            </a-tabs>
                        </a-tab-pane>
                    </a-tabs>
                </a-tab-pane>
            </a-tabs>
        </a-card>
    </div>
    <br>
    <a-card style="width: 80%;">
        <div style="font-size: 20px;font-weight:500;">
            关键词搜索：
            <input v-model="keyWord" placeholder="请输入关键词"><a-button class="search" @click="searchSubmit(keyWord)">搜索</a-button>
        </div>
    </a-card>
    <br>
    <a-card style="width: 80%;">
        <a-table :columns="columns" :data-source="records" bordered :pagination = "{showQuickJumper: true}">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'logo'">
                    <img :src="record.logo" style="width: 50px;">
                </template>
                <template v-if="column.dataIndex === 'operation'">
                    <a style="width: 50%; margin-right: 10px;" @click="download(record.manualName)"><img src="../../../网站切图图片20240318/吉品汇/吉品汇-产品手册详情_03.jpg">下载</a>
                    <a style="width: 50%; margin-right: 10px;" @click="collection(record.manualName)"><img src="../../../网站切图图片20240318/吉品汇/吉品汇-产品手册详情_05.jpg">收藏</a>
                </template>
            </template>
        </a-table>
    </a-card>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from 'vue'

    interface catagory{    //配合材料分类使用的数据结构
        activeKey:string,
        data:Array<{
            activeKey:string,
            id:string,
            data:Array<{
                activeKey:string,
                id:string,
                data:Array<{
                    id:string,
                    data:string
                }>
            }>
        }>
    }
    import catagoriesStore from '../../views/BrandsSubPages/catagories.json'
    const catagories = ref<catagory>(catagoriesStore)

    //输入的搜索关键字
    let keyWord = ref<string>('')

    //表格各列的数据类型
    const columns = [
        {
            title: 'LOGO',
            align: 'center',
            dataIndex: 'logo',
            width: '10%'
        },
        {
            title: '产品手册名称',
            align: 'center',
            dataIndex: 'manualName',
            width: '20%'
        },
        {
            title: '产品描述',
            align: 'center',
            dataIndex: 'productDescription',
            width: '35%'
        },
        {
            title: '发布公司',
            align: 'center',
            dataIndex: 'company',
            width: '20%'
        },
        {
            title: '操作',
            align: 'center',
            dataIndex: 'operation',
            width: '15%'
        },
    ];

    interface record{    //搜索时展示的数据结构
        key:string,
        logo:string,
        manualName:string,
        productDescription:string,
        company:string
    }

    let recordsStore:Array<record> = []    //存储搜索时展示的数据，由于该页面有模糊查询，所以选择将在前端进行模糊查询处理，
                                           //即recordsStore存储总的数据，records存储模糊查询处理后得到的数据
    for(let i = 0; i < 100; i += 1){    //表格的数据
        recordsStore.push({
            key: i.toString(),
            logo: '../../../网站切图图片20240318/吉品汇/吉品汇-产品手册详情_01.jpg',
            manualName: 'TOTO卫浴产品手册',
            productDescription: '卫生陶瓷系列五金配件',
            company: 'XX市洁具营销中心',
        })
    }
    let records = ref<Array<record>>(recordsStore)        //搜索时展示的数据

    function searchSubmit(keyWordValue:string){    //根据关键词提交搜索,即模糊查询
        records.value = recordsStore.filter(
            record=>{    //当record的产品手册名称、产品描述、发布公司中其中一个包含关键词时，就展示
                return record.manualName.includes(keyWordValue) ||
                       record.productDescription.includes(keyWordValue) ||
                       record.company.includes(keyWordValue)
            }
        )
    }
    function download(manualName:string){    //根据manualName下载产品手册函数

    }
    function collection(manualName:string){    //根据manualName收藏产品手册函数

    }
</script>

<style scoped>
.card_head{
    width: 80%;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: rgb(0, 0, 0);
    text-indent: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: bold;
}
.category{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.categoryDetail{
    width: 100%;
}
.search{
    height: 40px;
    margin: 0 10px;
    background-color: orange;
    font-size: 20px;
    font-weight: 500;
}
</style>